<template>
  <div>
    <DialogStyle>
      <el-dialog
        title="新增工单"
        :visible="dialogVisible"
        width="750px"
        :close-on-click-modal="false"
        @close="dialogClose"
        @open="dialogOpen"
      >
        <!-- 表单内容 -->
        <el-form ref="deptRef" :rules="deptRules" :model="formData" label-width="150px" style="padding-left:100px">
          <el-form-item prop="innerCode" label="设备编号：">
            <el-input v-model="formData.innerCode" placeholder="请输入" style="width:400px" @input="getPersonList" />
          </el-form-item>
          <el-form-item prop="taskType" label="工单类型：">
            <el-select v-if="formData.taskType||''" v-model="formData.taskType.typeName" style="width:400px" placeholder="请选择">
              <!-- el-select中v-model绑定的值是选中的option中value得值
            el-option渲染了当前下拉中的选项
            el-option label属性是用来负责展示内容的字段 -->
              <el-option
                :value="formData.taskType.typeName"
              />
            </el-select></el-form-item>
          <el-form-item prop="code" label="补货数量：">
            <el-button style="border:none;color:#5f84ff">
              补货详情
            </el-button>
          </el-form-item>
          <el-form-item prop="userName" label="运营人员：">
            <el-select v-model="formData.userName" style="width:400px">
              <!-- el-select中v-model绑定的值是选中的option中value得值
            el-option渲染了当前下拉中的选项
            el-option label属性是用来负责展示内容的字段 -->
              <el-option
                v-for="item in OperatorList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userName"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="desc" label="备注：">
            <el-input
              v-model="formData.desc"
              style="width:400px"
              type="textarea"
              :rows="5"
              placeholder="请输入备注(不超过40字)"
            />
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button style="margin-right:50px" @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      <DialogStyle /></dialogstyle></div>
</template>

<script>
import { OperatorListApi, createdWordApi } from '@/api'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    rowScendList: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      deptRules: {
        innerCode: [
          { required: true, message: '请输入', trigger: ['blur', 'change'] },
          { min: 1, max: 15, message: '请输入不超过15个字符', trigger: ['blur', 'change'] },
          { pattern: /^010000[0-9]{2}$/, message: '请输入正确格式的编号', trigger: ['blur'] }
        ],
        taskType: [
          { required: true, trigger: ['blur', 'change'] }
        ],
        userName: [
          { required: true, trigger: ['blur', 'change'] }
        ],
        desc: [
          { required: true, message: '请输入', trigger: ['blur'] },
          { min: 1, max: 40, message: '请输入不超过40个字符', trigger: ['blur', 'change'] }
        ]
      },
      formData: {
        taskType: {
          typeName: '补货工单'
        }
      },
      // formData: JSON.parse(localStorage.getItem('word')) || {},
      OperatorList: []
    }
  },
  watch: {
    // 获取运营人员列表和当前工单详情
    rowScendList() {
      this.formData = this.rowScendList
      this.getPersonList()
      // localStorage.setItem('word', JSON.stringify(this.formData))
      // console.log(this.formData, '11111')
    }
  },
  methods: {
    dialogOpen() {},
    // 关闭弹窗
    dialogClose() {
      this.$emit('closeInsideWord')
      this.OperatorList = ''
      this.$refs.deptRef.resetFields()
    },
    // 重新创建工单
    async submit() {
      // console.log(this.formData, '878946654')
      this.$refs.deptRef.validate(async valid => {
        if (!valid) return
        try {
          await createdWordApi(this.formData)
          this.$message.success('创建成功')
          this.$emit('fetchListFn')
          this.dialogClose()
        } catch (err) {
          this.$message.warning(`创建失败,${err.response.data}`)
        // console.dir(err)
        }
      })
    },
    // 获取运营人员列表
    async getPersonList() {
      const res = await OperatorListApi(this.formData.innerCode)
      // console.log(res, '5555555')
      this.OperatorList = res
    }
  }
}
</script>

<style>
.dialog-footer{
  margin-right: 250px;
}
</style>
